<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>

<header class="header">
    <ul class="nav nav-tabs pd20 pdb0">

        <li class="nav-item">
            <a class="navbar-brand" href="#">
                <img src="../assets/B.svg" width="30" height="30" alt="">
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">链接管理</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">备忘录</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">我的记账</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">行程计算</a>
        </li>
    </ul>
</header>
<div class="main">

    <div class="search">

        <form class="needs-validation  pl-3 pr-3 pt-3" novalidate >
            <div class="form-row">
                <div class="col-md-4 mb-3">
                    <label for="validationTooltip01">网址输入</label>
                    <input type="text" class="form-control" id="validationTooltip01" placeholder="请输入网址" >
                </div>
                <div class="col-md-4 mb-3">
                    <label for="validationTooltip02">Last name</label>
                    <input type="text" class="form-control" id="validationTooltip02" placeholder="请输入用户分类" >

                </div>
                <div class="col-md-4 mb-3">
                    <label for="">网址类型</label>
                    <div class="input-group">
                        <div class="btn-group">
                            <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                               所有类型
                            </button>
                            <div class="dropdown-menu">

                            </div>
                        </div>

                        <div class="invalid-tooltip">
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="submit" class="btn btn-primary">查询</button>
                <button type="button" class="btn btn-info">新增</button>
                <div class="input-group">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="inputGroupFile04">
                        <label class="custom-file-label" for="inputGroupFile04">选择网址模版</label>
                    </div>
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button">上传</button>
                    </div>
                </div>
            </div>
        </form>
    </div>



    <div class="main_table  pl-3 pr-3 pt-3">
        <table class="table  pl-3 pr-3 pt-3">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">网址</th>
                <th scope="col">备注</th>
                <th scope="col">分类</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td><a href="http://www.baidu.com" target="_blank">www.baidu.com</a></td>
                <td>百度</td>
                <td>搜索类</td>
                <td><a href="#"><i class="fa fa-trash-o fa-lg"></i> </a></td>
            </tr>
            </tbody>
        </table>

    </div>


</div>










</body>
<style>
    .pd20{padding: 20px;}
    .pdb0{padding-bottom: 0;}

    .custom-file-input{
        z-index: auto;
    }
    .custom-file-input:lang(en)~.custom-file-label::after{
        content: "打开文件";
    }
</style>
</html>